<template>
    <div class="theme-btn">
        <Button :icon="`pi ${iconClass}`" severity="help" @click="onThemeToggler" text raised rounded aria-label="Favorite"/>
    </div>
</template>

<script setup>
import {ref} from 'vue';
const iconClass = ref('pi-moon');

const onThemeToggler = () => {
    const root = document.getElementsByTagName('html')[0];

    root.classList.toggle('dark');
    iconClass.value = iconClass.value==='pi-moon' ? 'pi-sun': 'pi-moon';
};
</script>

<style lang="scss">
    .theme-btn {

    }
</style>